A few weeks ago, I attended a breakfast meeting with a bunch of entrepreneurs in the technology, space (yes, space travel), software and engineering industry. I felt so blown away by the incredible talent of the speakers. You know, there are people out there building things, like private satellite networks, bio printing facilities, quantum computers and self-driving cars. I was completely transfixed by the incredibly future facing, innovative and exceptionally inventive group in front of me. I also immediately wished I’d worked a little harder in my twenties.
After the presentations, one of the questions that came up during the Q&A session was: “what’s the next big thing?”
Wow. Have you ever thought about “the next big thing”?
Part of the magic of predicting innovation is that it’s really, really hard to get right. Those that can accurately predict the future (in my humble opinion) are those that tend to understand how people will respond to an idea once they’re exposed to it. I think predicting this is a very special skill indeed.
Then again, we’re expected to be able to predict the outcome of our marketing, all the time. While predicting it is one thing, making it happen it is a whole different ball game.
Competition for the attention of our customers is getting tougher
In our industry, when you really boil down what it is we do, we’re fixing things, making things, or we’re communicating things.
Most of the time, we’re building content that communicates: ideas, stories, news and guidance–you get the idea. The problem is, no matter which vertical you work in, we’re all competing for something: the attention of our customers.
As our customers get smarter, that competition is getting tougher and tougher.
The most successful marketers in our industry all have a special trait in common. They are good at finding new ways to communicate ideas. Take a look at classic presentations
like this from Ross Hudgens to see just how powerful it can be to observe, imitate and develop an idea with astounding viral reach.
I particularly enjoy the idea of taking a piece of content and making improvements, be it through design, layout or simply updating what’s there. I like it because it’s actually pretty easy to do, and there’s growing evidence of it happening all over the Internet. Brands are taking a second look at how they’re developing their content to appeal to a wider audience, or to appeal to a viral audience (or both!).
For example; take a look at this beautiful
travel guide to Vietnam (credit: travelindochina.com) or this long form guide to commercial property insurance (credit: Towergate Insurance / Builtvisible.com) for examples of brands in competitive verticals developing their existing content. In verticals where ordinary article content has been done to death, redeveloping the medium itself feels like an important next step.
Innovative isn’t the same thing as technical
I’ve felt for a long time that there’s a conflict between our interpretation of “innovative” and “technical”. As I’ve written before, those that really understand how the web works are at a huge advantage.
Learn how it’s built, and you’ll find yourself able to make great things happen on your own, simply by learning and experimenting.
In my opinion though, you don’t have to be able to learn how to build your own site or be a developer. All you have to do is learn the vocabulary and build a broad understanding of how things work in a browser. I actually think we all need to be doing this, right now. Why?
We need more innovation in content marketing
I think our future depends on our industry’s ability to innovate. Of course, you still need to have your basics in place. We’ll always be
T-Shaped marketers, executing a bit of technical SEO here, a bit of content strategy there. But, we’re all SEOs and we know we need to acquire links, build audiences and generally think big about our ambitions. When your goal is to attract new followers, fans, links, and garner shares in their thousands, you need to do something pretty exciting to attract attention to yourself.
The vocabulary of content development
I’ve designed this post to be a primer on more advanced features found in innovative content development. My original MozCon 2014 presentation was designed to educate on some of the technologies we should be aware of in our content development projects and the process we follow to build things. We’ll save process for another post (shout in the comments if you think that would be useful!) and focus on the “what” for now.
At Builtvisible, we’re working hard on extending our in-house content development capabilities. We learn through sharing amazing examples with each other. Our policy is to always attempt to deconstruct how something might have been developed, that way, we’re learning. Some of the things we see on the web are amazing–they deserve so much respect for the talent and the skills that surface the content.
Here are some examples that I think demonstrate some of the most useful types of approach for content marketers. I hope that these help as much as they’ve helped us, and I hope you can form a perspective of what innovative features look like in more advanced content development. Of course, do feel welcome to share your own examples in the comments, too! The more, the merrier!
The story of EBoy
eBoy: the graphic design firm whose three co-founders and sole members are widely regarded as the “godfathers” of pixel art.
The consistent styling (as well as the beautifully written content) is excellent. Technically speaking, perhaps the most clever and elegant feature is the zoom of the image positioned on the Z axis in a
An event listener (jQuery) helps size the canvas appropriate to the browser window size and the z axis position shifts on scroll to create an elegant zoom effect.
View the example here:
http://www.theverge.com/2014/6/17/5803850/pixel-perfect-the-story-of-eboy.
is an HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple animations.
Colorizing the past
Take a look at
Pixart Printing’s Guide to Colourizing the Past (credit: Pixartprinting / Builtvisible.com) for a clever example of
The colorization feature takes advantage of the power of the canvas element. In this case, the color version of the image is applied to the canvas as a background image, with the black and white version on a layer above. Clicking (or touching, on mobile) erases portions of the top image, revealing the color version underneath.
Chrome Experiments: Globe
Globe is “simple” global data visualization of the Earth’s population growth over a set range of dates. The 3d visualization based in
webGL: a JavaScript API for rendering interactive 3D graphics and 2D graphics within any compatible web browser without the use of plug-ins.
View the example here:
http://globe.chromeexperiments.com/.
WebGL is a really exciting, emerging option available to content marketers who might want to experiment with immersive experiences or highly interactive, simulated environments.
Some of my
favourite WebGL examples include Hello Racer and Tweetopia, a 3d Twitter Hastag visualizer.
If you’d like to see more examples of webGL in action, take a look at
Chrome Experiments. Don’t worry, this stuff works in the latest versions of Firefox and IE, too.
Polygon’s PS4 Review
You might have seen me cover this long form concept over at Builtvisible. Polygon’s Playstation 4 review is a fully featured “long form” review of Sony’s much loved gaming machine. The bit that I love is the SVG visualizations:
“What’s SVG?”, I hear you ask!
SVG is super-fast, sharp rendering of vector images inside the browser. Unlike image files (like .jpg, .gif, .png), SVG is XML based, light on file size, loads quickly and adjusts to responsive browser widths perfectly. SVG’s XML based schema lends itself to some interesting manipulation for stunning, easy to implement effects.
View Polygon’s example here: http://www.polygon.com/a/ps4-review.
That line tracing animation you see is known as
path animation. Essentially the path attribute in the SVG’s XML can be manipulated in the DOM with a little jQuery. What you’ll get is a pretty snazzy animation to keep your users eyes fixated on your content and yet another nice little effect to keep eyeballs engaged.
My favourite example of SVG execution is Lewis Lehe’s
Gridlocks and Bottlenecks. Gridlocks is a AngularJS, d3.js based visualization of the surprisingly technical and oft-misunderstood “gridlock” and “bottleneck” events in road traffic management.
It’s also very cool:
View the example here:http://setosa.io/blog/2014/09/02/gridlock/.
I have a short vocabulary list that I expect our team to be able to explain (certainly these questions come up in an interview with us!). I think that if you can explain what these things are, as a developing content marketer you’re way ahead of the curve:
- HTML5
- Responsive CSS (& libraries)
- CSS3 (& frameworks)
- JavaScript (& frameworks: jQuery, MooTools, Jade, Handlebars)
- JSON (api post and response data)
- webGL
- HTML5 audio & video
- SVG
- HTML5 History API manipulation with pushState
- Infinite Scroll
Want to learn more?
I’ve
amassed a series of videos on web development that I think marketers should watch. Not necessarily to learn web development, but definitely to be able to describe what it is you’d like your own content to do. My favourite: I really loved Wes Bos’s JS + HTML5 Video + Canvas tutorial. Amazing.
Innovation in content is such a huge topic but I realize I’ve run out of space (this is already a 1,400 word post) for now.
In my follow up, I’d like to talk about how to plan your content when it’s a little more extensive than just an article, give you some tips on how to work with (or find!) a developer, and how to make the most of every component in your content to get the most from your marketing efforts.
Until then, I’d love to see your own examples of great content and questions in the comments!
